<template>
    <div class="child">
        子组件


        父亲给孩子的money：{{ money }} ， house:{{ house }}

        <button @click="useMoney">----</button>


    </div>
</template>

<script setup lang="ts" name='Child'>
import { ref, reactive } from "vue";

// defineProps<{ money: number; house: string }>()

interface ChildProps {
    money: number;
    house: string;
    // tel: Function;
    tel: () => void
}



//在js中获取数据

// const {money,house,tel } = defineProps<ChildProps>()
const props = defineProps<ChildProps>()


//在子组件中修改父组件的数据
function useMoney() {
    console.log("props", props);
    //子组件不可以直接修改 父组件的中属性数据
    // props.money = 50;
    props.tel()
}

</script>

<style scoped>
.child {

    min-height: 100px;
    background-color: rgb(170, 181, 182);
    border-radius: 10px;
    padding: 5px;
    margin: 5px
}
</style>